ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗಾಗಿ ದೃಢವಾದ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಮತ್ತು ಫಾರ್ಮ್ ಥ್ರಾಟ್ಲಿಂಗ್ ಅಳವಡಿಸಿ ನಿಮ್ಮ Next.js ಮತ್ತು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಕ್ಷಿಸಿ. ಜಾಗತಿಕ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಪ್ರಾಯೋಗಿಕ ಮಾರ್ಗದರ್ಶಿ.
ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಕ್ಷಿಸುವುದು: ಸರ್ವರ್ ಆಕ್ಷನ್ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಮತ್ತು ಫಾರ್ಮ್ ಥ್ರಾಟ್ಲಿಂಗ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು, ವಿಶೇಷವಾಗಿ Next.js ನಲ್ಲಿ ಅಳವಡಿಸಿರುವಂತೆ, ನಾವು ಫುಲ್-ಸ್ಟಾಕ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ಮಹತ್ತರವಾದ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವು ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಸರ್ವರ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಕರೆಯಲು ಅನುಮತಿಸುವ ಮೂಲಕ ಡೇಟಾ ಬದಲಾವಣೆಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತವೆ, ಇದು ಫ್ರಂಟ್‌ಎಂಡ್ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ಕೋಡ್ ನಡುವಿನ ಗಡಿಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಸುಕುಗೊಳಿಸುತ್ತದೆ. ಈ ಮಾದರಿಯು ಅದ್ಭುತ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚಿನ ಶಕ್ತಿಯೊಂದಿಗೆ ಹೆಚ್ಚಿನ ಜವಾಬ್ದಾರಿಯೂ ಬರುತ್ತದೆ.
ನಿಮ್ಮ ಸರ್ವರ್ ಲಾಜಿಕ್‌ಗೆ ನೇರ ಮಾರ್ಗವನ್ನು ತೆರೆದಿಡುವುದರಿಂದ, ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ದುರುದ್ದೇಶಪೂರಿತ ವ್ಯಕ್ತಿಗಳಿಗೆ ಪ್ರಮುಖ ಗುರಿಯಾಗಬಹುದು. ಸರಿಯಾದ ರಕ್ಷಣೋಪಾಯಗಳಿಲ್ಲದಿದ್ದರೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸರಳ ಫಾರ್ಮ್ ಸ್ಪ್ಯಾಮ್‌ನಿಂದ ಹಿಡಿದು ಅತ್ಯಾಧುನಿಕ ಬ್ರೂಟ್-ಫೋರ್ಸ್ ಪ್ರಯತ್ನಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲ-ಬರಿದಾಗಿಸುವ ಡಿನಯಲ್-ಆಫ್-ಸರ್ವಿಸ್ (DoS) ದಾಳಿಗಳವರೆಗೆ ಹಲವಾರು ದಾಳಿಗಳಿಗೆ ಗುರಿಯಾಗಬಹುದು. ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿಸುವ ಸರಳತೆಯೇ ಭದ್ರತೆಯನ್ನು ಪ್ರಾಥಮಿಕ ಪರಿಗಣನೆಯಾಗಿ ತೆಗೆದುಕೊಳ್ಳದಿದ್ದರೆ ಅವುಗಳ ಅಕಿಲ್ಸ್ ಹೀಲ್ ಆಗಬಹುದು.
ಇಲ್ಲಿಯೇ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರುತ್ತವೆ. ಇವು ಕೇವಲ ಐಚ್ಛಿಕ ಹೆಚ್ಚುವರಿಗಳಲ್ಲ; ಯಾವುದೇ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಇವು ಮೂಲಭೂತ ಭದ್ರತಾ ಕ್ರಮಗಳಾಗಿವೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗೆ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಏಕೆ ಚರ್ಚೆಗೆ ಅವಕಾಶವಿಲ್ಲದಷ್ಟು ಮುಖ್ಯ ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಹಂತ-ಹಂತದ, ಪ್ರಾಯೋಗಿಕ ವಿವರಣೆಯನ್ನು ನೀಡುತ್ತೇವೆ. ನಾವು ಆಧಾರವಾಗಿರುವ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ತಂತ್ರಗಳಿಂದ ಹಿಡಿದು, Next.js, Upstash Redis, ಮತ್ತು ರಿಯಾಕ್ಟ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ ಹುಕ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಉತ್ಪಾದನೆಗೆ-ಸಿದ್ಧವಾದ ಅನುಷ್ಠಾನದವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಳ್ಳುತ್ತೇವೆ.
ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗೆ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಏಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಸಾರ್ವಜನಿಕವಾಗಿ ಕಾಣುವ ಫಾರ್ಮ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ—ಒಂದು ಲಾಗಿನ್ ಫಾರ್ಮ್, ಸಂಪರ್ಕ ಸಲ್ಲಿಕೆ, ಅಥವಾ ಕಾಮೆಂಟ್ ವಿಭಾಗ. ಈಗ, ಒಂದು ಸ್ಕ್ರಿಪ್ಟ್ ಆ ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಎಂಡ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ನೂರಾರು ಬಾರಿ ಹಿಟ್ ಮಾಡುತ್ತಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಇದರ ಪರಿಣಾಮಗಳು ಗಂಭೀರವಾಗಿರಬಹುದು.
- ಬ್ರೂಟ್-ಫೋರ್ಸ್ ದಾಳಿಗಳನ್ನು ತಡೆಯುವುದು: ಲಾಗಿನ್ ಅಥವಾ ಪಾಸ್‌ವರ್ಡ್ ಮರುಹೊಂದಿಸುವಂತಹ ದೃಢೀಕರಣ-ಸಂಬಂಧಿತ ಕ್ರಿಯೆಗಳಿಗೆ, ದಾಳಿಕೋರರು ಸಾವಿರಾರು ಪಾಸ್‌ವರ್ಡ್ ಸಂಯೋಜನೆಗಳನ್ನು ಪ್ರಯತ್ನಿಸಲು ಸ್ವಯಂಚಾಲಿತ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಐಪಿ ವಿಳಾಸ ಅಥವಾ ಬಳಕೆದಾರಹೆಸರಿನ ಆಧಾರದ ಮೇಲೆ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಕೆಲವು ವೈಫಲ್ಯಗಳ ನಂತರ ಈ ಪ್ರಯತ್ನಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಲ್ಲಿಸಬಹುದು.
- ಡಿನಯಲ್-ಆಫ್-ಸರ್ವಿಸ್ (DoS) ದಾಳಿಗಳನ್ನು ತಗ್ಗಿಸುವುದು: ಒಂದು DoS ದಾಳಿಯ ಗುರಿ ನಿಮ್ಮ ಸರ್ವರ್ ಅನ್ನು ಅತಿಯಾದ ವಿನಂತಿಗಳಿಂದ ತುಂಬಿಸುವುದು, ಇದರಿಂದ ಅದು ನ್ಯಾಯಸಮ್ಮತ ಬಳಕೆದಾರರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ. ಒಬ್ಬ ಕ್ಲೈಂಟ್ ಮಾಡಬಹುದಾದ ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಮಿತಿಗೊಳಿಸುವ ಮೂಲಕ, ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ರಕ್ಷಣೆಯ ಮೊದಲ ಸಾಲಿನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ನಿಮ್ಮ ಸರ್ವರ್‌ನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂರಕ್ಷಿಸುತ್ತದೆ.
- ಸಂಪನ್ಮೂಲ ಬಳಕೆಯನ್ನು ನಿಯಂತ್ರಿಸುವುದು: ಪ್ರತಿಯೊಂದು ಸರ್ವರ್ ಆಕ್ಷನ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತದೆ—ಸಿಪಿಯು ಸೈಕಲ್‌ಗಳು, ಮೆಮೊರಿ, ಡೇಟಾಬೇಸ್ ಸಂಪರ್ಕಗಳು, ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಮೂರನೇ ವ್ಯಕ್ತಿಯ API ಕರೆಗಳು. ಅನಿಯಂತ್ರಿತ ವಿನಂತಿಗಳು ಒಬ್ಬ ಬಳಕೆದಾರ (ಅಥವಾ ಬಾಟ್) ಈ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳಲು ಕಾರಣವಾಗಬಹುದು, ಇದು ಎಲ್ಲರಿಗೂ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ.
- ಸ್ಪ್ಯಾಮ್ ಮತ್ತು ದುರುಪಯೋಗವನ್ನು ತಡೆಯುವುದು: ವಿಷಯವನ್ನು ರಚಿಸುವ ಫಾರ್ಮ್‌ಗಳಿಗೆ (ಉದಾ., ಕಾಮೆಂಟ್‌ಗಳು, ವಿಮರ್ಶೆಗಳು, ಬಳಕೆದಾರ-ರಚಿಸಿದ ಪೋಸ್ಟ್‌ಗಳು), ನಿಮ್ಮ ಡೇಟಾಬೇಸ್ ಅನ್ನು ಸ್ಪ್ಯಾಮ್‌ನಿಂದ ತುಂಬದಂತೆ ಸ್ವಯಂಚಾಲಿತ ಬಾಟ್‌ಗಳನ್ನು ತಡೆಯಲು ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಅತ್ಯಗತ್ಯ.
- ವೆಚ್ಚಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು: ಇಂದಿನ ಕ್ಲೌಡ್-ನೇಟಿವ್ ಜಗತ್ತಿನಲ್ಲಿ, ಸಂಪನ್ಮೂಲಗಳು ನೇರವಾಗಿ ವೆಚ್ಚಗಳಿಗೆ ಸಂಬಂಧಿಸಿವೆ. ಸರ್ವರ್‌ಲೆಸ್ ಫಂಕ್ಷನ್‌ಗಳು, ಡೇಟಾಬೇಸ್ ಓದುವಿಕೆ/ಬರೆಯುವಿಕೆ, ಮತ್ತು API ಕರೆಗಳೆಲ್ಲವೂ ಬೆಲೆಯನ್ನು ಹೊಂದಿವೆ. ವಿನಂತಿಗಳಲ್ಲಿನ ಹಠಾತ್ ಏರಿಕೆ ಅನಿರೀಕ್ಷಿತವಾಗಿ ದೊಡ್ಡ ಬಿಲ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. ವೆಚ್ಚ ನಿಯಂತ್ರಣಕ್ಕೆ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಒಂದು ನಿರ್ಣಾಯಕ ಸಾಧನವಾಗಿದೆ.
ಪ್ರಮುಖ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ನಾವು ಕೋಡ್‌ಗೆ ಧುಮುಕುವ ಮೊದಲು, ರೇಟ್ ಲಿಮಿಟಿಂಗ್‌ಗಾಗಿ ಬಳಸಲಾಗುವ ವಿವಿಧ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಪ್ರತಿಯೊಂದಕ್ಕೂ ನಿಖರತೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸಂಕೀರ್ಣತೆಯ ದೃಷ್ಟಿಯಿಂದ ತನ್ನದೇ ಆದ ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲತೆಗಳಿವೆ.
1. ಫಿಕ್ಸ್ಡ್ ವಿಂಡೋ ಕೌಂಟರ್
ಇದು ಅತ್ಯಂತ ಸರಳವಾದ ಅಲ್ಗಾರಿದಮ್. ಇದು ಒಂದು ಗುರುತಿಸುವಿಕೆಯಿಂದ (ಐಪಿ ವಿಳಾಸದಂತಹ) ಬರುವ ವಿನಂತಿಗಳನ್ನು ಒಂದು ನಿಗದಿತ ಸಮಯದ ಚೌಕಟ್ಟಿನಲ್ಲಿ (ಉದಾ., 60 ಸೆಕೆಂಡುಗಳು) ಎಣಿಸುವ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಎಣಿಕೆಯು ಒಂದು ಮಿತಿಯನ್ನು ಮೀರಿದರೆ, ವಿಂಡೋ ಮರುಹೊಂದಿಸುವವರೆಗೆ ಹೆಚ್ಚಿನ ವಿನಂತಿಗಳನ್ನು ನಿರ್ಬಂಧಿಸಲಾಗುತ್ತದೆ.
- ಪ್ರಯೋಜನಗಳು: ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭ ಮತ್ತು ಮೆಮೊರಿ-ದಕ್ಷ.
- ಅನಾನುಕೂಲಗಳು: ವಿಂಡೋದ ಅಂಚಿನಲ್ಲಿ ಟ್ರಾಫಿಕ್‌ನ ಹಠಾತ್ ಏರಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ, ಪ್ರತಿ ನಿಮಿಷಕ್ಕೆ 100 ವಿನಂತಿಗಳ ಮಿತಿಯಿದ್ದರೆ, ಒಬ್ಬ ಬಳಕೆದಾರ 00:59 ಕ್ಕೆ 100 ವಿನಂತಿಗಳನ್ನು ಮತ್ತು 01:01 ಕ್ಕೆ ಮತ್ತೊಂದು 100 ವಿನಂತಿಗಳನ್ನು ಮಾಡಬಹುದು, ಇದು ಅತಿ ಕಡಿಮೆ ಅವಧಿಯಲ್ಲಿ 200 ವಿನಂತಿಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
2. ಸ್ಲೈಡಿಂಗ್ ವಿಂಡೋ ಲಾಗ್
ಈ ವಿಧಾನವು ಪ್ರತಿ ವಿನಂತಿಗಾಗಿ ಒಂದು ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ಲಾಗ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಮಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು, ಇದು ಕಳೆದ ವಿಂಡೋದಲ್ಲಿನ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ನಿಖರವಾಗಿದೆ.
- ಪ್ರಯೋಜನಗಳು: ಅತ್ಯಂತ ನಿಖರ, ಏಕೆಂದರೆ ಇದು ವಿಂಡೋ-ಅಂಚಿನ ಸಮಸ್ಯೆಯಿಂದ ಬಳಲುವುದಿಲ್ಲ.
- ಅನಾನುಕೂಲಗಳು: ಹೆಚ್ಚು ಮೆಮೊರಿಯನ್ನು ಬಳಸಬಹುದು, ಏಕೆಂದರೆ ಇದು ಪ್ರತಿ ವಿನಂತಿಗೂ ಒಂದು ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್ ಅನ್ನು ಸಂಗ್ರಹಿಸಬೇಕಾಗುತ್ತದೆ.
3. ಸ್ಲೈಡಿಂಗ್ ವಿಂಡೋ ಕೌಂಟರ್
ಇದು ಹಿಂದಿನ ಎರಡು ವಿಧಾನಗಳ ನಡುವೆ ಉತ್ತಮ ಸಮತೋಲನವನ್ನು ನೀಡುವ ಒಂದು ಹೈಬ್ರಿಡ್ ವಿಧಾನವಾಗಿದೆ. ಇದು ಹಿಂದಿನ ವಿಂಡೋ ಮತ್ತು ಪ್ರಸ್ತುತ ವಿಂಡೋದಿಂದ ಬರುವ ವಿನಂತಿಗಳ ತೂಕದ ಎಣಿಕೆಯನ್ನು ಪರಿಗಣಿಸಿ ಹಠಾತ್ ಏರಿಕೆಗಳನ್ನು ಸರಾಗಗೊಳಿಸುತ್ತದೆ. ಇದು ಸ್ಲೈಡಿಂಗ್ ವಿಂಡೋ ಲಾಗ್‌ಗಿಂತ ಕಡಿಮೆ ಮೆಮೊರಿ ಬಳಕೆಯೊಂದಿಗೆ ಉತ್ತಮ ನಿಖರತೆಯನ್ನು ನೀಡುತ್ತದೆ.
- ಪ್ರಯೋಜನಗಳು: ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ, ಮೆಮೊರಿ-ದಕ್ಷ, ಮತ್ತು ಹಠಾತ್ ಟ್ರಾಫಿಕ್ ವಿರುದ್ಧ ದೃಢವಾದ ರಕ್ಷಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಅನಾನುಕೂಲಗಳು: ಫಿಕ್ಸ್ಡ್ ವಿಂಡೋಗಿಂತ ಮೊದಲಿನಿಂದ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ.
ಹೆಚ್ಚಿನ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಸ್ಲೈಡಿಂಗ್ ವಿಂಡೋ ಅಲ್ಗಾರಿದಮ್ ಶಿಫಾರಸು ಮಾಡಲಾದ ಆಯ್ಕೆಯಾಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ಆಧುನಿಕ ಲೈಬ್ರರಿಗಳು ನಮಗಾಗಿ ಸಂಕೀರ್ಣ ಅನುಷ್ಠಾನ ವಿವರಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತವೆ, ಇದರಿಂದ ನಾವು ಅದರ ನಿಖರತೆಯಿಂದ ತಲೆನೋವಿಲ್ಲದೆ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು.
ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗೆ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು
ಈಗ, ನಾವು ಕೆಲಸಕ್ಕೆ ಇಳಿಯೋಣ. ನಾವು Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಉತ್ಪಾದನೆಗೆ-ಸಿದ್ಧವಾದ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಪರಿಹಾರವನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ. ನಮ್ಮ ಸ್ಟಾಕ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
- Next.js (ಆಪ್ ರೂಟರ್‌ನೊಂದಿಗೆ): ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಫ್ರೇಮ್‌ವರ್ಕ್.
- Upstash Redis: ಸರ್ವರ್‌ಲೆಸ್, ಜಾಗತಿಕವಾಗಿ ವಿತರಿಸಲಾದ Redis ಡೇಟಾಬೇಸ್. ಇದು ಈ ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕೆ ಪರಿಪೂರ್ಣವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಅತ್ಯಂತ ವೇಗವಾಗಿರುತ್ತದೆ (ಕಡಿಮೆ ಲೇಟೆನ್ಸಿ ಚೆಕ್‌ಗಳಿಗೆ ಸೂಕ್ತ) ಮತ್ತು Vercel ನಂತಹ ಸರ್ವರ್‌ಲೆಸ್ ಪರಿಸರಗಳಲ್ಲಿ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
- @upstash/ratelimit: Upstash Redis ಅಥವಾ ಯಾವುದೇ Redis ಕ್ಲೈಂಟ್‌ನೊಂದಿಗೆ ವಿವಿಧ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸರಳ ಮತ್ತು ಶಕ್ತಿಯುತ ಲೈಬ್ರರಿ.
ಹಂತ 1: ಪ್ರಾಜೆಕ್ಟ್ ಸೆಟಪ್ ಮತ್ತು ಡಿಪೆಂಡೆನ್ಸಿಗಳು
ಮೊದಲು, ಹೊಸ Next.js ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ಅಗತ್ಯ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ.
npx create-next-app@latest my-secure-app
cd my-secure-app
npm install @upstash/redis @upstash/ratelimit
ಹಂತ 2: Upstash Redis ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ
1. Upstash console ಗೆ ಹೋಗಿ ಮತ್ತು ಹೊಸ ಗ್ಲೋಬಲ್ Redis ಡೇಟಾಬೇಸ್ ಅನ್ನು ರಚಿಸಿ. ಇದರಲ್ಲಿ ಪ್ರಾರಂಭಿಸಲು ಉಚಿತವಾದ ಉದಾರ ಶ್ರೇಣಿಯಿದೆ. 2. ರಚಿಸಿದ ನಂತರ, `UPSTASH_REDIS_REST_URL` ಮತ್ತು `UPSTASH_REDIS_REST_TOKEN` ಅನ್ನು ನಕಲಿಸಿ. 3. ನಿಮ್ಮ Next.js ಪ್ರಾಜೆಕ್ಟ್‌ನ ರೂಟ್‌ನಲ್ಲಿ `.env.local` ಫೈಲ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ನಿಮ್ಮ ರುಜುವಾತುಗಳನ್ನು ಸೇರಿಸಿ:
UPSTASH_REDIS_REST_URL="YOUR_URL_HERE"
UPSTASH_REDIS_REST_TOKEN="YOUR_TOKEN_HERE"
ಹಂತ 3: ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಸೇವೆಯನ್ನು ರಚಿಸಿ
ನಿಮ್ಮ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಲಾಜಿಕ್ ಅನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ. ನಾವು `lib/rate-limiter.ts` ನಲ್ಲಿ ಒಂದು ಫೈಲ್ ಅನ್ನು ರಚಿಸೋಣ.
// lib/rate-limiter.ts
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
import { headers } from 'next/headers';
// Create a new Redis client instance.
const redis = new Redis({
url: process.env.UPSTASH_REDIS_REST_URL!,
token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});
// Create a new ratelimiter, that allows 10 requests per 10 seconds.
export const ratelimit = new Ratelimit({
redis: redis,
limiter: Ratelimit.slidingWindow(10, "10 s"),
analytics: true, // Optional: Enables analytics tracking
});
/**
* A helper function to get the user's IP address from the request headers.
* It prioritizes specific headers that are common in production environments.
*/
export function getIP() {
const forwardedFor = headers().get('x-forwarded-for');
const realIp = headers().get('x-real-ip');
if (forwardedFor) {
return forwardedFor.split(',')[0].trim();
}
if (realIp) {
return realIp.trim();
}
return '127.0.0.1'; // Fallback for local development
}
ಈ ಫೈಲ್‌ನಲ್ಲಿ, ನಾವು ಎರಡು ಪ್ರಮುಖ ಕೆಲಸಗಳನ್ನು ಮಾಡಿದ್ದೇವೆ: 1. ನಮ್ಮ ಎನ್ವಿರಾನ್ಮೆಂಟ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿ ನಾವು Redis ಕ್ಲೈಂಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದ್ದೇವೆ. 2. ನಾವು `Ratelimit` ಇನ್‌ಸ್ಟನ್ಸ್ ಅನ್ನು ರಚಿಸಿದ್ದೇವೆ. ನಾವು `slidingWindow` ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ, ಇದನ್ನು ಪ್ರತಿ 10-ಸೆಕೆಂಡ್ ವಿಂಡೋಗೆ ಗರಿಷ್ಠ 10 ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸಲು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆ. ಇದು ಒಂದು ಸಮಂಜಸವಾದ ಆರಂಭಿಕ ಹಂತವಾಗಿದೆ, ಆದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಅಗತ್ಯಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ನೀವು ಈ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಹೊಂದಿಸಬೇಕು. 3. ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರಾಕ್ಸಿ ಅಥವಾ ಲೋಡ್ ಬ್ಯಾಲೆನ್ಸರ್‌ನ ಹಿಂದೆ ಇರುವಾಗಲೂ (ಉತ್ಪಾದನೆಯಲ್ಲಿ ಬಹುತೇಕ ಯಾವಾಗಲೂ ಹೀಗಿರುತ್ತದೆ) ಸರಿಯಾಗಿ ಐಪಿ ವಿಳಾಸವನ್ನು ಓದುವ ಸಹಾಯಕ `getIP` ಫಂಕ್ಷನ್ ಅನ್ನು ನಾವು ಸೇರಿಸಿದ್ದೇವೆ.
ಹಂತ 4: ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಸುರಕ್ಷಿತಗೊಳಿಸಿ
ನಾವು ಸರಳವಾದ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಅನ್ನು ರಚಿಸೋಣ ಮತ್ತು ಅದರ ಸಲ್ಲಿಕೆ ಕ್ರಿಯೆಗೆ ನಮ್ಮ ರೇಟ್ ಲಿಮಿಟರ್ ಅನ್ನು ಅನ್ವಯಿಸೋಣ.
ಮೊದಲು, `app/actions.ts` ನಲ್ಲಿ ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ:
// app/actions.ts
'use server';
import { z } from 'zod';
import { ratelimit, getIP } from '@/lib/rate-limiter';
// Define the shape of our form state
export interface FormState {
success: boolean;
message: string;
}
const FormSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters.'),
email: z.string().email('Invalid email address.'),
message: z.string().min(10, 'Message must be at least 10 characters.'),
});
export async function submitContactForm(prevState: FormState, formData: FormData): Promise {
// 1. RATE LIMITING LOGIC - This should be the very first thing
const ip = getIP();
const { success, limit, remaining, reset } = await ratelimit.limit(ip);
if (!success) {
const now = Date.now();
const retryAfter = Math.floor((reset - now) / 1000);
return {
success: false,
message: `Too many requests. Please try again in ${retryAfter} seconds.`,
};
}
// 2. Validate form data
const validatedFields = FormSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
message: formData.get('message'),
});
if (!validatedFields.success) {
return {
success: false,
message: validatedFields.error.flatten().fieldErrors.message?.[0] || 'Invalid input.',
};
}
// 3. Process the data (e.g., save to a database, send an email)
console.log('Form data is valid and processed:', validatedFields.data);
// Simulate a network delay
await new Promise(resolve => setTimeout(resolve, 1000));
// 4. Return a success message
return {
success: true,
message: 'Your message has been sent successfully!',
};
}
ಮೇಲಿನ ಕ್ರಿಯೆಯಲ್ಲಿನ ಪ್ರಮುಖ ಅಂಶಗಳು:
- `'use server';`: ಈ ನಿರ್ದೇಶನವು ಫೈಲ್‌ನ ರಫ್ತುಗಳನ್ನು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೆಂದು ಗುರುತಿಸುತ್ತದೆ.
- ಮೊದಲು ರೇಟ್ ಲಿಮಿಟಿಂಗ್: `ratelimit.limit(identifier)` ಗೆ ಕರೆ ಮಾಡುವುದು ನಾವು ಮಾಡುವ ಮೊಟ್ಟಮೊದಲ ಕೆಲಸ. ಇದು ನಿರ್ಣಾಯಕ. ವಿನಂತಿಯು ನ್ಯಾಯಸಮ್ಮತವಾಗಿದೆಯೇ ಎಂದು ತಿಳಿಯುವ ಮೊದಲು ನಾವು ಯಾವುದೇ ಮೌಲ್ಯೀಕರಣ ಅಥವಾ ಡೇಟಾಬೇಸ್ ಪ್ರಶ್ನೆಗಳನ್ನು ಮಾಡಲು ಬಯಸುವುದಿಲ್ಲ.
- ಗುರುತಿಸುವಿಕೆ: ರೇಟ್ ಲಿಮಿಟಿಂಗ್‌ಗಾಗಿ ನಾವು ಬಳಕೆದಾರರ ಐಪಿ ವಿಳಾಸವನ್ನು (`ip`) ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆಯಾಗಿ ಬಳಸುತ್ತೇವೆ.
- ತಿರಸ್ಕಾರವನ್ನು ನಿಭಾಯಿಸುವುದು: `success` ತಪ್ಪು ಆಗಿದ್ದರೆ, ಇದರರ್ಥ ಬಳಕೆದಾರರು ರೇಟ್ ಮಿತಿಯನ್ನು ಮೀರಿದ್ದಾರೆ. ನಾವು ತಕ್ಷಣವೇ ಒಂದು ರಚನಾತ್ಮಕ ದೋಷ ಸಂದೇಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತೇವೆ, ಇದರಲ್ಲಿ ಬಳಕೆದಾರರು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸುವ ಮೊದಲು ಎಷ್ಟು ಸಮಯ ಕಾಯಬೇಕು ಎಂಬ ಮಾಹಿತಿಯೂ ಇರುತ್ತದೆ.
- ರಚನಾತ್ಮಕ ಸ್ಟೇಟ್: ಈ ಆಕ್ಷನ್ ಯಾವಾಗಲೂ `FormState` ಇಂಟರ್ಫೇಸ್‌ಗೆ ಹೊಂದುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ ಮೂಲಕ `useFormState` ಹುಕ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು UI ನಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ಹಂತ 5: ಫ್ರಂಟ್‌ಎಂಡ್ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಿ
ಈಗ, `app/page.tsx` ನಲ್ಲಿ ಈ ಆಕ್ಷನ್ ಅನ್ನು ಬಳಸುವ ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸೋಣ.
// app/page.tsx
'use client';
import { useFormState, useFormStatus } from 'react-dom';
import { submitContactForm, FormState } from './actions';
const initialState: FormState = {
success: false,
message: '',
};
function SubmitButton() {
const { pending } = useFormStatus();
return (
);
}
export default function ContactForm() {
const [state, formAction] = useFormState(submitContactForm, initialState);
return (
Contact Us
);
}
ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ವಿಭಜಿಸುವುದು:
- `'use client';`: ಈ ಕಾಂಪೊನೆಂಟ್ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿರಬೇಕು ಏಕೆಂದರೆ ಇದು ಹುಕ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ (`useFormState`, `useFormStatus`).
- `useFormState` ಹುಕ್: ಈ ಹುಕ್ ಫಾರ್ಮ್ ಸ್ಥಿತಿಯನ್ನು ಮನಬಂದಂತೆ ನಿರ್ವಹಿಸಲು ಪ್ರಮುಖವಾಗಿದೆ. ಇದು ಸರ್ವರ್ ಆಕ್ಷನ್ ಮತ್ತು ಆರಂಭಿಕ ಸ್ಥಿತಿಯನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಪ್ರಸ್ತುತ ಸ್ಥಿತಿ ಮತ್ತು `
- `useFormStatus` ಹುಕ್: ಇದು ಪೋಷಕ `
- ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವುದು: ನಮ್ಮ `state` ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ `message` ಅನ್ನು ತೋರಿಸಲು ನಾವು ಷರತ್ತುಬದ್ಧವಾಗಿ ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತೇವೆ. `success` ಫ್ಲ್ಯಾಗ್ ನಿಜವೋ ಅಥವಾ ತಪ್ಪೋ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಪಠ್ಯದ ಬಣ್ಣ ಬದಲಾಗುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ತಕ್ಷಣದ, ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ, ಅದು ಯಶಸ್ಸಿನ ಸಂದೇಶ, ಮೌಲ್ಯೀಕರಣ ದೋಷ, ಅಥವಾ ರೇಟ್ ಮಿತಿ ಎಚ್ಚರಿಕೆಯಾಗಿರಬಹುದು.
ಈ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ಒಬ್ಬ ಬಳಕೆದಾರ 10 ಸೆಕೆಂಡುಗಳಲ್ಲಿ 10 ಕ್ಕಿಂತ ಹೆಚ್ಚು ಬಾರಿ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಿದರೆ, ಸರ್ವರ್ ಆಕ್ಷನ್ ವಿನಂತಿಯನ್ನು ತಿರಸ್ಕರಿಸುತ್ತದೆ, ಮತ್ತು UI ಸೌಜನ್ಯದಿಂದ ಈ ರೀತಿಯ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ: "Too many requests. Please try again in 7 seconds."
ಬಳಕೆದಾರರನ್ನು ಗುರುತಿಸುವುದು: ಐಪಿ ವಿಳಾಸ ವರ್ಸಸ್ ಬಳಕೆದಾರ ಐಡಿ
ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಗುರುತಿಸುವಿಕೆಯಾಗಿ ಐಪಿ ವಿಳಾಸವನ್ನು ಬಳಸಿದ್ದೇವೆ. ಇದು ಅನಾಮಧೇಯ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ, ಆದರೆ ಇದಕ್ಕೆ ಮಿತಿಗಳಿವೆ:
- ಹಂಚಿಕೆಯ ಐಪಿಗಳು: ಕಾರ್ಪೊರೇಟ್ ಅಥವಾ ವಿಶ್ವವಿದ್ಯಾನಿಲಯದ ನೆಟ್‌ವರ್ಕ್‌ನ ಹಿಂದಿರುವ ಬಳಕೆದಾರರು ಒಂದೇ ಸಾರ್ವಜನಿಕ ಐಪಿ ವಿಳಾಸವನ್ನು (ನೆಟ್‌ವರ್ಕ್ ಅಡ್ರೆಸ್ ಟ್ರಾನ್ಸ್‌ಲೇಶನ್ - NAT) ಹಂಚಿಕೊಳ್ಳಬಹುದು. ಒಬ್ಬ ದುರುಪಯೋಗಿ ಬಳಕೆದಾರನು ಎಲ್ಲರಿಗೂ ಐಪಿಯನ್ನು ನಿರ್ಬಂಧಿಸುವಂತೆ ಮಾಡಬಹುದು.
- ಐಪಿ ಸ್ಪೂಫಿಂಗ್/ವಿಪಿಎನ್‌ಗಳು: ದುರುದ್ದೇಶಪೂರಿತ ವ್ಯಕ್ತಿಗಳು ಐಪಿ-ಆಧಾರಿತ ಮಿತಿಗಳನ್ನು ತಪ್ಪಿಸಲು ವಿಪಿಎನ್‌ಗಳು ಅಥವಾ ಪ್ರಾಕ್ಸಿಗಳನ್ನು ಬಳಸಿ ತಮ್ಮ ಐಪಿ ವಿಳಾಸಗಳನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು.
ದೃಢೀಕರಿಸಿದ ಬಳಕೆದಾರರಿಗೆ, ಅವರ ಬಳಕೆದಾರ ಐಡಿ ಅಥವಾ ಸೆಷನ್ ಐಡಿ ಅನ್ನು ಗುರುತಿಸುವಿಕೆಯಾಗಿ ಬಳಸುವುದು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ. ಒಂದು ಹೈಬ್ರಿಡ್ ವಿಧಾನವು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮವಾಗಿರುತ್ತದೆ:
// Inside your server action
import { auth } from './auth'; // Assuming you have an auth system like NextAuth.js or Clerk
const session = await auth();
const identifier = session?.user?.id || getIP(); // Prioritize user ID if available
const { success } = await ratelimit.limit(identifier);
ನೀವು ವಿವಿಧ ರೀತಿಯ ಬಳಕೆದಾರರಿಗಾಗಿ ವಿಭಿನ್ನ ರೇಟ್ ಲಿಮಿಟರ್‌ಗಳನ್ನು ಸಹ ರಚಿಸಬಹುದು:
// In lib/rate-limiter.ts
export const authenticatedRateLimiter = new Ratelimit({ /* more generous limits */ });
export const anonymousRateLimiter = new Ratelimit({ /* stricter limits */ });
ರೇಟ್ ಲಿಮಿಟಿಂಗ್‌ನ ಆಚೆಗೆ: ಸುಧಾರಿತ ಫಾರ್ಮ್ ಥ್ರಾಟ್ಲಿಂಗ್ ಮತ್ತು UX
ಸರ್ವರ್-ಸೈಡ್ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಭದ್ರತೆಗಾಗಿ. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಥ್ರಾಟ್ಲಿಂಗ್ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ. ಸಂಬಂಧವಿದ್ದರೂ, ಅವು ವಿಭಿನ್ನ ಉದ್ದೇಶಗಳನ್ನು ಪೂರೈಸುತ್ತವೆ. ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಥ್ರಾಟ್ಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಬಳಕೆದಾರರು ವಿನಂತಿಯನ್ನು *ಮಾಡದಂತೆ* ತಡೆಯುತ್ತದೆ, ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಅನಗತ್ಯ ನೆಟ್‌ವರ್ಕ್ ಟ್ರಾಫಿಕ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
ಕೌಂಟ್‌ಡೌನ್ ಟೈಮರ್‌ನೊಂದಿಗೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಥ್ರಾಟ್ಲಿಂಗ್
ನಮ್ಮ ಫಾರ್ಮ್ ಅನ್ನು ಸುಧಾರಿಸೋಣ. ಬಳಕೆದಾರರು ರೇಟ್-ಲಿಮಿಟ್ ಆದಾಗ, ಕೇವಲ ಸಂದೇಶವನ್ನು ತೋರಿಸುವ ಬದಲು, ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಮತ್ತು ಕೌಂಟ್‌ಡೌನ್ ಟೈಮರ್ ಅನ್ನು ತೋರಿಸೋಣ. ಇದು ಉತ್ತಮ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
ಮೊದಲು, ನಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್ `retryAfter` ಅವಧಿಯನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕಾಗಿದೆ.
// app/actions.ts (updated part)
export interface FormState {
success: boolean;
message: string;
retryAfter?: number; // Add this new property
}
// ... inside submitContactForm
if (!success) {
const now = Date.now();
const retryAfter = Math.floor((reset - now) / 1000);
return {
success: false,
message: `Too many requests. Please try again in a moment.`,
retryAfter: retryAfter, // Pass the value back to the client
};
}
ಈಗ, ಈ ಮಾಹಿತಿಯನ್ನು ಬಳಸಲು ನಮ್ಮ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡೋಣ.
// app/page.tsx (updated)
'use client';
import { useEffect, useState } from 'react';
import { useFormState, useFormStatus } from 'react-dom';
import { submitContactForm, FormState } from './actions';
// ... initialState and component structure remains the same
function SubmitButton({ isThrottled, countdown }: { isThrottled: boolean; countdown: number }) {
const { pending } = useFormStatus();
const isDisabled = pending || isThrottled;
return (
);
}
export default function ContactForm() {
const [state, formAction] = useFormState(submitContactForm, initialState);
const [countdown, setCountdown] = useState(0);
useEffect(() => {
if (!state.success && state.retryAfter) {
setCountdown(state.retryAfter);
}
}, [state]);
useEffect(() => {
if (countdown > 0) {
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
return () => clearTimeout(timer);
}
}, [countdown]);
const isThrottled = countdown > 0;
return (
{/* ... form structure ... */}
);
}
ಈ ಸುಧಾರಿತ ಆವೃತ್ತಿಯು ಈಗ `useState` ಮತ್ತು `useEffect` ಬಳಸಿ ಕೌಂಟ್‌ಡೌನ್ ಟೈಮರ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಸರ್ವರ್‌ನಿಂದ ಬರುವ ಫಾರ್ಮ್ ಸ್ಥಿತಿಯು `retryAfter` ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದ್ದಾಗ, ಕೌಂಟ್‌ಡೌನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. `SubmitButton` ನಿಷ್ಕ್ರಿಯಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಉಳಿದ ಸಮಯವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಬಳಕೆದಾರರು ಸರ್ವರ್ ಅನ್ನು ಸ್ಪ್ಯಾಮ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸ್ಪಷ್ಟ, ಕಾರ್ಯಸಾಧ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ.
ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು
ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಪರಿಹಾರದ ಒಂದು ಭಾಗ ಮಾತ್ರ. ಒಂದು ದೃಢವಾದ ತಂತ್ರವು ಸಮಗ್ರ ದೃಷ್ಟಿಕೋನವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
- ನಿಮ್ಮ ರಕ್ಷಣೆಗಳನ್ನು ಪದರ ಮಾಡಿ: ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಒಂದು ಪದರ. ಇದನ್ನು ಇತರ ಭದ್ರತಾ ಕ್ರಮಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬೇಕು, ಉದಾಹರಣೆಗೆ ದೃಢವಾದ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯೀಕರಣ (ನಾವು ಇದಕ್ಕಾಗಿ Zod ಬಳಸಿದ್ದೇವೆ), CSRF ರಕ್ಷಣೆ (ಇದನ್ನು Next.js ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗಾಗಿ POST ವಿನಂತಿಯನ್ನು ಬಳಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ), ಮತ್ತು ಹೊರಗಿನ ಪದರದ ರಕ್ಷಣೆಗಾಗಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಫೈರ್‌ವಾಲ್ (WAF) ಉದಾಹರಣೆಗೆ Cloudflare.
- ಸೂಕ್ತ ಮಿತಿಗಳನ್ನು ಆರಿಸಿ: ರೇಟ್ ಮಿತಿಗಳಿಗೆ ಯಾವುದೇ ಮಾಂತ್ರಿಕ ಸಂಖ್ಯೆಯಿಲ್ಲ. ಇದು ಒಂದು ಸಮತೋಲನ. ಲಾಗಿನ್ ಫಾರ್ಮ್‌ಗೆ ಅತ್ಯಂತ ಕಟ್ಟುನಿಟ್ಟಾದ ಮಿತಿ ಇರಬಹುದು (ಉದಾ., 15 ನಿಮಿಷಗಳಿಗೆ 5 ಪ್ರಯತ್ನಗಳು), ಆದರೆ ಡೇಟಾ ತರಲು ಬಳಸುವ API ಗೆ ಹೆಚ್ಚು ಹೆಚ್ಚಿನ ಮಿತಿ ಇರಬಹುದು. ಸಂಪ್ರದಾಯಬದ್ಧ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ, ನಿಮ್ಮ ಟ್ರಾಫಿಕ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ, ಮತ್ತು ಅಗತ್ಯವಿದ್ದಂತೆ ಸರಿಹೊಂದಿಸಿ.
- ಜಾಗತಿಕವಾಗಿ ವಿತರಿಸಿದ ಸ್ಟೋರ್ ಬಳಸಿ: ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ, ಲೇಟೆನ್ಸಿ ಮುಖ್ಯ. ಆಗ್ನೇಯ ಏಷ್ಯಾದಿಂದ ಬರುವ ವಿನಂತಿಯು ಉತ್ತರ ಅಮೇರಿಕಾದಲ್ಲಿರುವ ಡೇಟಾಬೇಸ್‌ನಲ್ಲಿ ರೇಟ್ ಮಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಬಾರದು. Upstash ನಂತಹ ಜಾಗತಿಕವಾಗಿ ವಿತರಿಸಿದ Redis ಪೂರೈಕೆದಾರರನ್ನು ಬಳಸುವುದರಿಂದ ರೇಟ್ ಮಿತಿ ಪರಿಶೀಲನೆಗಳು ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರದಲ್ಲಿ, ಅಂಚಿನಲ್ಲಿ ನಡೆಯುತ್ತವೆ, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಎಲ್ಲರಿಗೂ ವೇಗವಾಗಿರಿಸುತ್ತದೆ.
- ಮೇಲ್ವಿಚಾರಣೆ ಮತ್ತು ಎಚ್ಚರಿಕೆ: ನಿಮ್ಮ ರೇಟ್ ಲಿಮಿಟರ್ ಕೇವಲ ರಕ್ಷಣಾತ್ಮಕ ಸಾಧನವಲ್ಲ; ಇದು ಒಂದು ರೋಗನಿರ್ಣಯದ ಸಾಧನವೂ ಆಗಿದೆ. ರೇಟ್-ಲಿಮಿಟೆಡ್ ವಿನಂತಿಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ ಮತ್ತು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ. ಹಠಾತ್ ಏರಿಕೆಯು ಸಂಘಟಿತ ದಾಳಿಯ ಆರಂಭಿಕ ಸೂಚಕವಾಗಿರಬಹುದು, ಇದು ನಿಮಗೆ ಪೂರ್ವಭಾವಿಯಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
- ಸೌಜನ್ಯಯುತ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು: ನಿಮ್ಮ Redis ಇನ್‌ಸ್ಟನ್ಸ್ ತಾತ್ಕಾಲಿಕವಾಗಿ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ? ನೀವು ಒಂದು ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ನಿರ್ಧರಿಸಬೇಕು. ವಿನಂತಿಯು ಫೇಲ್ ಓಪನ್ (ವಿನಂತಿಯನ್ನು ಅನುಮತಿಸು) ಆಗಬೇಕೇ ಅಥವಾ ಫೇಲ್ ಕ್ಲೋಸ್ಡ್ (ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸು) ಆಗಬೇಕೇ? ಪಾವತಿ ಪ್ರಕ್ರಿಯೆಯಂತಹ ನಿರ್ಣಾಯಕ ಕ್ರಿಯೆಗಳಿಗೆ, ಫೇಲ್ ಕ್ಲೋಸ್ಡ್ ಸುರಕ್ಷಿತ. ಕಾಮೆಂಟ್ ಪೋಸ್ಟ್ ಮಾಡುವಂತಹ ಕಡಿಮೆ ನಿರ್ಣಾಯಕ ಕ್ರಿಯೆಗಳಿಗೆ, ಫೇಲ್ ಓಪನ್ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು.
ತೀರ್ಮಾನ
ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಬಹಳವಾಗಿ ಸರಳಗೊಳಿಸುವ ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಅವುಗಳ ನೇರ ಸರ್ವರ್ ಪ್ರವೇಶವು ಭದ್ರತೆ-ಮೊದಲು ಮನಸ್ಥಿತಿಯನ್ನು ಅಗತ್ಯಪಡಿಸುತ್ತದೆ. ದೃಢವಾದ ರೇಟ್ ಲಿಮಿಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಒಂದು ನಂತರದ ಆಲೋಚನೆಯಲ್ಲ—ಇದು ಸುರಕ್ಷಿತ, ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಮೂಲಭೂತ ಅವಶ್ಯಕತೆಯಾಗಿದೆ.
Upstash Ratelimit ನಂತಹ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ ಸರ್ವರ್-ಸೈಡ್ ಜಾರಿಯನ್ನು `useFormState` ಮತ್ತು `useFormStatus` ನಂತಹ ಹುಕ್‌ಗಳನ್ನು ಬಳಸಿ ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಚಿಂತನಶೀಲ, ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ದೃಷ್ಟಿಕೋನದೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಅತ್ಯುತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಉಳಿಸಿಕೊಂಡು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ದುರುಪಯೋಗದಿಂದ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ರಕ್ಷಿಸಬಹುದು. ಈ ಪದರ ಪದರದ ದೃಷ್ಟಿಕೋನವು ನಿಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ಸಂಭಾವ್ಯ ಹೊಣೆಗಾರಿಕೆಯ ಬದಲು ಶಕ್ತಿಯುತ ಆಸ್ತಿಯಾಗಿ ಉಳಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ನಿರ್ಮಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.